<template>
	<view
		class="ac-empty"
		:class="[props._class]"
		:style="[_style, props._style]"
		@click="_onClick()"
		@longpress="_onLongpress()"
	>
		<image
			:src="acBase64Static['base64_' + props.img]"
			:style="{
				width: props.imgWidth + 'rpx',
				height: props.imgHeight + 'rpx',
			}"
			mode=""
		></image>
		<ac-text v-if="props.title" :fontSize="props.titleFontSize" :color="props.titleColor" :label="props.title" />
		<ac-text v-if="props.note" :fontSize="props.noteFontSize" :color="props.noteColor" :label="props.note" />
		<slot name="footer"></slot>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

import acBase64Static from './empty.js';

const emits = defineEmits(['click']);

// base64_car,
// 	base64_page,
// 	base64_search,
// 	base64_address,
// 	base64_wifi,
// 	base64_order,
// 	base64_coupon,
// 	base64_list,
// 	base64_data,

const props = defineProps({
	...pub_props,
	color: {
		type: String,
	},
	linear: {
		type: Boolean,
		default: false,
	},
	title: {
		//描述
		type: [String, Number],
		default: '',
	},
	titleFontSize: {
		type: [String, Number],
		default: 'md',
	},
	titleColor: {
		type: [String, Number],
		default: 'gray-700',
	},
	note: {
		//解释
		type: [String, Number],
		default: '',
	},
	noteFontSize: {
		type: [String, Number],
		default: 'sm',
	},
	noteColor: {
		type: [String, Number],
		default: 'gray-500',
	},
	imgWidth: {
		type: [String, Number],
		default: '300',
	},
	imgHeight: {
		type: [String, Number],
		default: '300',
	},
	img: {
		type: String,
		default: 'data',
	},
	description: {
		type: String,
		default: '描述文字',
	},
	_class: {
		type: String,
	},
	_style: {
		type: String,
	},
});

const _img = computed(() => {
	return acBase64Static['base64_' + props.img];
});
const _style = computed(() => {
	let style = {};
	if (props.border) {
		style['border'] = `solid ${props.border}rpx`;
		style['border-color'] = computedColor(props.borderColor, '', props.theme);
	}

	if (props.color && !props.linear) {
		style['background-color'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	if (props.color && props.linear) {
		style['background-image'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	return style;
});

function _onClick() {
	emits('click');
}

function _onLongPress() {
	emits('longpress');
}
</script>

<style scoped>
.ac-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
